<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>ArcGIS API for JavaScript | Place Finding</title>
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/esri/css/esri.css">
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="../../themes/claro/claro.css">

    <style>
      html, body, #container { height:99%; width:100%; margin:0; padding:0; }
      #location {	padding: 5px 0 0 5px; height:99%; width: 260px; float:left; }
      #map { height:99%; width: 900px; position: absolute;	top: 5px;	left: 265px; }
      #tree {	overflow-y: scroll;	width: 250px;	float: left; height:100%; }
      #search { display: block;}
      .simpleGeocoder .esriGeocoderContainer { width: 250px; }
    </style>

		<script type="text/javascript">
			var dojoConfig = {
						packages: [
							{ name: "cbtree",location: "/../../../" }
						]
			};
		</script>

    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3"></script>
    <script type="text/javascript">
      require(["dojo/ready",
							 "dojo/request/handlers",
               "cbtree/Tree",
							 "cbtree/store/Hierarchy", 
               "cbtree/model/ForestStoreModel",
               "cbtree/store/handlers/arcGisHandler",
							 "esri/dijit/Popup",
               "esri/dijit/Geocoder",
               "esri/map"
              ], function (ready, handlers, Tree, Hierarchy, StoreModel, arcGisHandler, Popup) {

				var map, geocoder, layer, template, symbol;

				ready(function() {
					var popup = new Popup(null, dojo.create("div"));
					// create the map
					map = new esri.Map("map",{
						basemap: "topo",
						center: [ -100, 37 ], // long, lat
						zoom: 5,
						infoWindow: popup
					});

					// add a graphics layer for geocoding results
					layer = map.addLayer(new esri.layers.GraphicsLayer({
						id: "results"
					}));

					// create the geocoder
					geocoder = new esri.dijit.Geocoder({ 
						autoNavigate: false, // do not zoom to best result
						maxLocations: 20, // increase number of results returned
						map: map,
						arcgisGeocoder: {
							url: "http://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer",
							name: "Esri World Geocoder",
							placeholder: "Find a place",
							sourceCountry: "USA" // limit search to the United States
						}
					}, "search");
					geocoder.startup();
					geocoder.focus();

					symbol = new esri.symbol.PictureMarkerSymbol({
						"angle":0,
						"xoffset":0,
						"yoffset":10,
						"type":"esriPMS",
						"url":"http://static.arcgis.com/images/Symbols/Shapes/BluePin1LargeB.png",
						"contentType":"image/png",
						"width":24,
						"height":24
					});
					template = new esri.InfoTemplate("${name}", "${*}");

					// Add event listener to geocoder.
					geocoder.on( "findResults", function(response) {
						var store = new Hierarchy( { data: response, handleAs:"geocoder", 
																				  dataHandler: {
																						handler: arcGisHandler,
																						options: {
																								query: {"feature.attributes.Score":100},
																								symbol: symbol, 
																								template: template
																						}
																				  } 
																			});
						var model = new StoreModel({ store:store, query:{type:"parent"} });
						var tree  = new Tree( {model:model, showRoot:false, persist:false});
						tree.placeAt("location");
						tree.startup();

						// Add event listener to the tree...
						tree.on( "checkBoxClick", function( location, node, evt) {
							function setFeatures(location) {
								if (location.type == "child") {
									if(model.getChecked(location)) {
										layer.add(location.feature);
									} else {
										layer.remove(location.feature);
									}
								}
							}
							store.getChildren(location).forEach( setFeatures );
							setFeatures(location);
						});
						this.clear();
					});
				});

		});
    </script>
  </head>
  <body class="claro">
		<div id="container">
			<div id="location">
				<div id="search"></div>
			</div>
			<div id="map"></div>
		</div>
  </body>
</html>
